// pages/home/games/eating/fir/fir.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    rot: 0,
    arr: [
      '不吃',
      '汉堡',
      '米饭',
      '胡辣汤',
      '胡辣汤',
      '小米粥',
      '小米粥',
      '面条面条'
    ],
    ssallnum: 8,
    model_show:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawmyzp();
    let animate = wx.createAnimation({
      duration: 5000,
      timingFunction: 'ease-out',
    })
    this.animate = animate;
  },
  drawmyzp: function () {
    let that = this;
    let context = wx.createContext();
    let width = 300;
    let height = 300;
    let r = 150;
    function reSet() {
      context.height = 300;
      context.width = 300;
      context.translate(150, 150);
      context.rotate(247.5 * 2 * Math.PI / 360)
      context.save();//保存中点坐标1 
    }
    reSet()
    // 画圆
    function drawyuan() {
      context.save();
      context.beginPath();
      context.lineWidth = 20;
      context.strokeStyle = '#fed045'
      context.arc(0, 0, 140, 0, 2 * Math.PI, false);
      context.stroke();
      context.restore()
    }
    drawyuan()

    // 画弧

    function drawhu() {
      let stardeg, enddeg;
      for (let i = 0; i < 8; i++) {
        stardeg = Math.PI * 2 * i / 8;
        enddeg = Math.PI * 2 * (i + 1) / 8;
        context.save();
        context.beginPath();
        context.lineWidth = 30;
        if (i % 2 == 0) {
          context.strokeStyle = '#fee0d6'

        } else {
          context.strokeStyle = '#fef5e4'

        }
        context.arc(0, 0, 115, stardeg, enddeg, false);
        context.stroke();
        context.restore()

      }
    }
    drawhu()
    // 画分割线
    function drawline() {
      let actingreg = 0;
      let x, y;
      for (let i = 0; i < 8; i++) {
        actingreg = Math.PI * 2 * i / 8;
        x = 130 * Math.cos(actingreg)
        y = 130 * Math.sin(actingreg)
        context.beginPath();
        context.save();
        context.moveTo(0, 0);
        context.strokeStyle = '#fccd37'
        context.lineTo(x, y);
        context.stroke()
        context.restore();
      }
    }
    drawline()
    // 写字
    function drawword() {

      context.textBaseline = 'middle';
      context.fillStyle = '#333';
      let step = 2 * Math.PI / 8;
      for (var i = 0; i < 8; i++) {
        context.save();
        context.beginPath();
        context.rotate(i * step)
        context.translate(85, 0);
        context.rotate(Math.PI * (2 + 8) / (2 * 8))
        context.font = "bold 12px Arial";
        context.fillStyle = "#090909";
        let mx;

        switch (that.data.arr[i].length) {
          case 1: {mx = 25; console.log(mx);break;}
          case 2: {mx = 20; console.log(mx);break;}
          case 3: {mx = 15; console.log(mx);break;}
          case 4: {mx = 10; console.log(mx);break;}
          default:{mx = 0; console.log(mx);break;}
        }

        

        context.fillText(that.data.arr[i],mx, 0);
        context.closePath();
        context.restore();
      }
    }
    drawword()
    function sss() {
      context.rotate(-135 * 2 * Math.PI / 360)
    }
    sss()
    wx.drawCanvas({
      canvasId: 'testcanvas',
      actions: context.getActions()
    })
  },
  go() {

    let choseindex = Math.floor(Math.random() * 8)

    let rotdeg = this.data.rot - this.data.rot % 360;
    console.log(rotdeg, 1)
    rotdeg = rotdeg + 720 + 360 * choseindex / 8;
    console.log(rotdeg, 2)

    this.animate.rotate(-rotdeg).step();

    this.setData({
      rot: rotdeg,
      animationdata: this.animate.export()
    })
    let xx = this.data.arr[choseindex];

    setTimeout(function () {
      console.log(this)

      wx.showToast({
        title: '选中' + this.data.arr[choseindex],
        icon: 'success',
        mask: true,
        duration: 2000
      })
    }.bind(this), 5000)

  },
  changemodel(){
    this.setData({
      model_show:!this.data.model_show
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})